<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选项卡切换</title>
  <script src="js/vue.js"></script>
  <style>
    .tabs{
      font-size: 14px;
      color: #657180
    }
    .tabs-bar-after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background-color: #d7dde4;
      margin-top: -1px
    }
    .tabs-tab{
      display: inline-block;
      padding: 4px 16px;
      margin-right: 6px;
      background: #fff;
      border: 1px solid #d7dde4;
      cursor: pointer;
      position: relative
    }
    .tabs-tab-active{
      color: #3399ff;
      border-top: 1px solid #3399ff;
      border-bottom: 1px solid #fff;
    }
    .tabs-tab-active::after{
      content: '';
      display: block;
      height: 1px;
      background-color: #3399ff;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
    .tab-content{
      padding: 8px 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <tabs v-model="actvieKey">
      <pane label="标题一" name='1'>我是内容一</pane>
      <pane label="标题二" name='2'>我是内容二</pane>
      <pane label="标题三" name='3'>我是内容三</pane>
    </tabs>
  </div>

  <script>
    Vue.component('tabs', {
      template: '\
        <div class="tabs">\
          <div class="tab-bar">\
            <div\
              :class="tabCls(item)"\
              v-for="(item, index) in navList"\
              @click="handleClick(index)"\
              >\
              {{item.label}}\
            </div>\
          </div>\
          <div class="content">\
            <!-- 切换的内容部分  -->\
            <slot></slot>\
          </div>\
        </div>',
        props: {
          value: {
            type: [String, Number]
          }
        },
        data() {
          return {
            navList: [],
            current: this.value
          }
        },
        methods: {
          handleClick(index) {
            this.current = index;
          },
          tabCls(item) {
            return [
              'tabs-tab',
              {
                'tabs-tab-active': item.name == this.current
              }
            ]
          },
          getTabs() {//拿到所有子组件的数量
            return this.$children.filter(item => {
              return item.$options.name === 'pane';
            })
          },
          updateNav() {
            this.navList = [];

            this.getTabs().forEach( (pane, index) => {
              this.navList.push({
                name: pane.name || index,
                label: pane.label
              });
              console.log(this.navList);
              if(!pane.name) pane.name = index;
              if(index === 0) {
                if(!this.current){
                  this.current = pane.name || index
                }
              }
              this.updateStatus();
            });
            //console.log(this.navList);
          },
          updateStatus(){
            var tabs = this.getTabs();

            //console.log(tabs);
            tabs.forEach( (item,index) => {
              console.log('item.name', item.name)
              console.log('this.current', this.current)
              return item.show =  item.name == this.current;
            })
          }
        },
        watch: {
          value(val) {
            this.current = val;
          },
          current() {
            this.updateStatus()
          }
        }
    });
    Vue.component('pane', {
      template: '<div class="pane" v-show="show"><slot></slot></div>',
      data() {
        return {
          show: true
        }
      },
      props: {
        name: {
          type: String
        },
        label: {
          type: String,
          default: ''
        }
      },
      methods: {
        updateNav() {
          this.$parent.updateNav();
        }
      },
      watch: {
        label() {
          this.updateNav();
        }
      },
      mounted() {
        this.updateNav();
      }
    })
    var app = new Vue({
      el: '#app',
      data: {
        actvieKey: 2
      }
    })
  </script>
</body>
</html>